<template>
  <div class='home'>
    <div class="swiper"> 
      <img src="@/assets/images/banner02.jpg" alt="">
    </div> 
    <div class="topusdt">
        <ul class="flex">
          <li v-for="(item,index) in quotation" v-if="item.is_display == 1&&index<5" :key="index">
              <div class="flex ft12 between" :data-name='item.currency_name+"/"+item.legal_name'>
              <div>
                  <p>{{item.currency_name}}/{{item.legal_name}}</p>
                  <p class="ft18 mt15 now_price">{{(item.now_price - 0).toFixed(4)}}</p>
                  <!-- <p class="mt5 color47 now_cny">≈{{(item.now_price*6.9641).toFixed(2)}} CNY</p> -->
                  <p class="mt15"><span class="color47">24H量</span> <span class="volume">{{(item.volume-0).toFixed(2)}}</span></p>
              </div>
              <button :class="[{'downcolor': item.change.substring(0,1) == '-'}]">{{item.change}}%</button>
              </div>
          </li>
        </ul>
    </div>
    <p>{{token}}</p>
    <p>{{gtoken}}</p>
   
  </div>
</template>

<script>
import {mapState,mapActions,mapGetters} from 'vuex';
export default {
  name:'home',
  data () {
    return {
        quotation:[],
       
    };
  },
  computed:{
    ...mapState({
      token:state=>state.token
    }),
    ...mapGetters({
      'gtoken': 'getToken'
    })

  },
  mounted(){
    this.getQuotation();
    this.connect();
  },
  methods:{
    getQuotation() {
      this.axios({
        url: "/api/currency/quotation_new",
        method: "get"
      }).then(res => {
        if (res.data.type == "ok" && res.data.message.length != 0) {
          // this.nowCoin = this.quotation[0].name;
          var data = res.data.message;
          this.quotation=data.find((item) => item.name == 'USDT').quotation;
        }
      });
    },
    connect() {
        var that = this;
        that.$socket.emit("login", that.$makeSocketId());
        that.$socket.on("daymarket", msg => {
            if (msg.type == 'daymarket') {
                let lists = that.quotation;
                for (let i in lists) {
                    if (lists[i].currency_name == msg.currency_name&&lists[i].legal_name == msg.legal_name) {
                        that.quotation[i].change = msg.change;
                        that.quotation[i].now_price = msg.now_price;
                        that.quotation[i].volume = msg.volume;
                    }
                }
            }
        });
    },
  }
}

</script>
<style lang='scss' scoped>
.swiper{
    height: 540px;
    overflow: hidden;
    img{width: 100%;height: 540px;}
    @media screen and (max-width:1560px){
      height: 400px;
      img{
        height: 400px;
      }
    }

}
.topusdt{
  border-top: 1px solid rgba(29,50,66,.7);
  background-color: #0a151e;
  color: #9eb5ca;
  ul{
    width: 100%;
    li{
      width: 25%;
      padding: 25px 0;
      >div{
        border-right: 1px solid rgba(29,50,66,.7);
        padding: 0 15%;
      }
      .color47{
        color: #477a90;
      }
      .ml5{
        margin-left: 5px;
      }
      button{
        border: none;
        padding: 5px 20px;
        border-radius: 5px;
        height: 30px;
        background: #0d2f32;
        color: #0d8551;
      }
      .downcolor{
        color: #ef4034;
        background: #3b2128;
      }
    }
    li:last-child{
      >div{
        border-right: none;
      }
    }
    li:hover{
      background: #101a21;
      >div{
        border: none;
      }
    }
    
  }
}
</style>